// ========= flex布局 ==========



// 横向/垂直对齐
.flex {
	display: flex;
	flex-direction: row;
}
.flex-rc {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.flex-rcw {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
}
.flex-rec {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}
.flex-irc {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
}

// 横向/居两端/垂直对齐
.flex-rcc {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}


// 横向/居两端
.flex-rs {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

// 横向/居两端/垂直对齐
.flex-rsc {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

// 横向/居两端/换行
.flex-rsw {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

// 纵向/垂直方向居中
.flex-cc {
	display: flex;
	flex-direction: column;
	align-items: center;
}

// 纵向/垂直方向居中
.flex-ccc {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}




// ========= 字体样式 ==========

.text {
	color: #333333;
}

// 加粗
.bold,
text.bold {
	font-weight: bold;
}

// ========= 单行、多行样式 ==========
// 单行
.one-line {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;

}

// 两行
.two-line {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

// 三行
.three-line {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.submit-bottom {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	height: 160rpx;
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 0px 0px;
	left: 0;

	.submit-bottoms {
		width: 702rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #F8852A 0%, #F8852A 100%);
		border-radius: 16rpx;
		border: 3rpx solid #333333;
		margin: 32rpx auto;
		font-size: 32rpx;
		font-family: HarmonyOS_Sans_SC_Medium;
		color: #333333;
		text-align: center;
		line-height: 96rpx;
	}
}

.padding24 {
	padding: 0 24rpx;
}

.padding32 {
	padding: 0 32rpx;
}

// button-fixed组件icon样式
.button-fixed-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}



// 我的-用户信息
.user-info {
	width: 750rpx;
	height: 544rpx;
	// background: linear-gradient(180deg, rgba(120, 240, 184, 0.16) 0%, rgba(120, 240, 184, 0) 100%);
	padding: 128rpx 30rpx 0;
	position: relative;

	.base {
		.avatar {
			width: 168rpx;
			height: 168rpx;
			background: #FFFFFF;
			box-shadow: 0 4rpx 34rpx 0 rgba(74, 176, 125, 0.24);
			border-radius: 50%;
			border: 4rpx solid #FFF;

		}


		.icon.sex {
			width: 52rpx;
			height: 52rpx;
			margin-top: -38rpx;
		}

		.sync {
			font-size: 30rpx;
			color: rgba(16, 16, 16, 0.8);
			line-height: 48rpx;
			margin-top: 32rpx;
			padding: 0 20rpx;
			border-radius: 24rpx;
			border: 2rpx solid rgba(16, 16, 16, 0.8);
		}
	}


	.text {
		height: 48rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #101010;
		line-height: 48rpx;

		&.name {
			margin-top: 20rpx;
		}
	}

	.button.follow {
		width: 160rpx;
		line-height: 64rpx;
		background: #FBEF4E;
		border-radius: 50rpx;
		border: 3rpx solid #333333;
		margin-top: 32rpx;

		text {
			font-size: 28rpx;
			color: #333333;
			margin-left: 10rpx;
		}
	}

	.list {
		width: 100%;
		margin-top: 58rpx;

		&.follow {
			margin-top: 88rpx;
		}

		.item {
			flex: 1;

			.label {
				font-size: 24rpx;
				color: #B1B4B2;
				line-height: 32rpx;
				margin-top: 4rpx;
			}
		}
	}

	&.follow {
		height: 576rpx;
		padding: 32rpx 30rpx 0;
		background: none;

		.list {
			margin-top: 32rpx;
		}
	}


}


// 悬浮按钮
.button-wrap {
	.blank-block {
		width: 750rpx;
		height: 160rpx;
	}
	
	
	
	.button-box {
		width: 750rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		padding: 32rpx 24rpx;
		box-shadow: 0rpx -2rpx 3rpx rgba($color: #000000, $alpha: 0.2);
		
		
		.button {
			width: 702rpx;
			line-height: 96rpx;
			background: #F8852A;
			border-radius: 16rpx;
			border: 3rpx solid #333333;
			
			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			
			.label {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				
			}
		}
	}
}

// 返回按钮
.back-button {
	width: 80rpx;
	height: 48rpx;
	text-align: center;
	background:  rgba($color: #FFFFFF, $alpha: 0.5);
	border-radius: 24rpx;
	position: fixed;
}